<template>
     <!-- 侧边栏 -->
     <div class="floating-sidebar">
    <ul class="menu">
      <router-link to="/">
         <li @click="goHome">
        <i class="fas fa-home"></i>
        <span>回到首页</span>
      </li>
      </router-link>
     
      <li @click="openSearch">
        <i class="fas fa-search"></i>
        <span>搜索</span>
      </li>
      <router-link to="/blog/write">
        <li @click="writeBlog">
        <i class="fas fa-edit"></i>
        <span>我要写博客</span>
      </li>
      </router-link>
      <router-link to="/blog/write">
        <li @click="writeBlog">
        <i class="fas fa-edit"></i>
        <span>我要写博客</span>
      </li>
      </router-link>
      <router-link to="/blog/writes">
        <li @click="writeBlog">
        <i class="fas fa-edit"></i>
        <span>我要写博客二</span>
      </li>
      </router-link>
      
    </ul>
  </div>
  </template>
  
  <script>
  export default {
    name: "BlogSidebar",
    methods: {
    // 回到首页
    goHome() {
      alert("回到首页");
      // 这里可以替换为实际的路由跳转逻辑，例如：
      // this.$router.push('/');
    },
    // 打开搜索
    openSearch() {
      alert("打开搜索");
      // 这里可以替换为实际的搜索逻辑
    },
    // 写博客
    writeBlog() {
      alert("我要写博客");
      // this.$router.push('/blog/writes');
      // 这里可以替换为实际的写博客逻辑
    },
  },
};
  
  
  </script>
  <style scoped>
  
 /* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 悬浮侧边栏容器 */
.floating-sidebar {
  width: 60px; /* 默认宽度 */
  background-color: #2c3e50;
  transition: width 0.3s ease;
  overflow: hidden;
  position: fixed;
  top: 50%; /* 垂直居中 */
  left: 0;
  transform: translateY(-50%); /* 垂直居中 */
  border-radius: 0 10px 10px 0; /* 右侧圆角 */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 侧边栏悬停时展开 */
.floating-sidebar:hover {
  width: 200px;
}

/* 侧边栏菜单项 */
.floating-sidebar .menu {
  list-style: none;
  padding: 20px 0;
}

.floating-sidebar .menu li {
  padding: 10px 20px;
  color: #ecf0f1;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.floating-sidebar .menu li:hover {
  background-color: #34495e;
}

/* 图标样式 */
.floating-sidebar .menu li i {
  font-size: 24px;
  margin-right: 15px;
  min-width: 24px; /* 固定图标宽度 */
}

/* 文字样式 */
.floating-sidebar .menu li span {
  font-size: 16px;
  opacity: 0; /* 默认隐藏文字 */
  transition: opacity 0.3s ease;
  white-space: nowrap; /* 防止文字换行 */
}

/* 悬停时显示文字 */
.floating-sidebar:hover .menu li span {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-sidebar {
    width: 50px; /* 小屏幕时缩小宽度 */
  }

  .floating-sidebar:hover {
    width: 150px; /* 小屏幕时悬停展开宽度 */
  }

  .floating-sidebar .menu li i {
    font-size: 20px; /* 缩小图标大小 */
    margin-right: 10px;
  }

  .floating-sidebar .menu li span {
    font-size: 14px; /* 缩小文字大小 */
  }
}

@media (max-width: 480px) {
  .floating-sidebar {
    width: 40px; /* 超小屏幕时进一步缩小宽度 */
  }

  .floating-sidebar:hover {
    width: 120px; /* 超小屏幕时悬停展开宽度 */
  }

  .floating-sidebar .menu li i {
    font-size: 18px; /* 进一步缩小图标大小 */
    margin-right: 8px;
  }

  .floating-sidebar .menu li span {
    font-size: 12px; /* 进一步缩小文字大小 */
  }
}
  
          
  </style>